<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Java Debugger Web Interface</title>
</head>

<body>
    <input id="url" type="text" style="width: 500px;" value="ws://127.0.0.1:12345/debug"/>
    <button type="button" onclick="connect()">连接</button>
    <button type="button" onclick="closeWebSocket()">关闭WebSocket连接</button>
    <button type="button" onclick="clearMessage()">清空日志</button>
    <br/>
    <input type="text" id="classNameInput" placeholder="Class Name">
    <input type="number" id="lineNumberInput" placeholder="Line Number">
    <button id="setBreakpointButton">添加断点</button>
    <button id="removeBreakpointButton">移除断点</button>
    <button id="toggleBreakpointButton">停用/启用单个断点</button>
    <button id="toggleAllBreakpoint">停用/启用所有断点</button>
    <button id="listBreakpointsButton">断点列表</button>
    <br/>
   <button id="singleStepButton">Single Step</button>
    <button id="continueButton">执行到下一断点</button>
    <button id="getVariablesButton">Get Variables</button>
    <div id="output"></div>

    <script>
        var websocket = null;

        function connect() {
            var url = document.getElementById('url').value;
            //判断当前浏览器是否支持WebSocket
            if ('WebSocket' in window) {
                websocket = new WebSocket(url);
            }
            else {
                alert('当前浏览器 Not support websocket')
            }

            websocket.onopen = function (event) {
                console.log('Connected to the WebSocket server');
                setMessage('Connected to the WebSocket server');
            };

            websocket.onmessage = function (event) {
                setMessage(event.data);
            };

            websocket.onclose = function (event) {
                console.log('Disconnected from the WebSocket server');
                setMessage('Disconnected from the WebSocket server');
            };
        }

        //关闭WebSocket连接
        function closeWebSocket() {
            websocket.close();
        }

        //将消息显示在网页上
        function setMessage(text) {
            const output = document.getElementById('output');
            const message = document.createElement('p');
            message.textContent = '' + text;
            output.appendChild(message);
        }

        //清空日志
        function clearMessage() {
            //alert("点击了");
            document.getElementById('output').innerHTML = '';
        }

        const setBreakpointButton = document.getElementById('setBreakpointButton');
        const removeBreakpointButton = document.getElementById('removeBreakpointButton');
        const toggleBreakpointButton = document.getElementById('toggleBreakpointButton');
        const toggleAllBreakpoint = document.getElementById('toggleAllBreakpoint');
        const listBreakpointsButton = document.getElementById('listBreakpointsButton');
        const classNameInput = document.getElementById('classNameInput');
        const lineNumberInput = document.getElementById('lineNumberInput');
        const singleStepButton = document.getElementById('singleStepButton');
        const getVariablesButton = document.getElementById('getVariablesButton');
        const continueButton = document.getElementById('continueButton');


        setBreakpointButton.addEventListener('click', function () {
            const className = classNameInput.value;
            const lineNumber = lineNumberInput.value;
            if (className && lineNumber) {
                websocket.send(`setBreakpoint ${className} ${lineNumber}`);
            }
        });

        removeBreakpointButton.addEventListener('click', function () {
            const className = classNameInput.value;
            const lineNumber = lineNumberInput.value;
            if (className && lineNumber) {
                websocket.send(`removeBreakpoint ${className} ${lineNumber}`);
            }
        });

        toggleBreakpointButton.addEventListener('click', function () {
            const className = classNameInput.value;
            const lineNumber = lineNumberInput.value;
            if (className && lineNumber) {
                websocket.send(`toggleBreakpoint ${className} ${lineNumber}`);
            }
        });

        toggleAllBreakpoint.addEventListener('click', function () {
            websocket.send('toggleAllBreakpoint');
        });

        listBreakpointsButton.addEventListener('click', function () {
            websocket.send('listBreakpoints');
        });

        singleStepButton.addEventListener('click', function () {
            websocket.send('singleStep');
        });

        continueButton.addEventListener('click', function () {
            websocket.send('continue');
        });

        getVariablesButton.addEventListener('click', function () {
            websocket.send('getVariables');
        });
    </script>
</body>

</html>
